AI Sparkles and alternate text

Existing examples

Many companies are introducing new icons to represent data or experiences that are AI powered. This page explores some existing patterns and suggests best practices. The suggested text is "AI powered", but this would vary with context and brand content design.

QBO Business Feed

"Sparkles" is used as the alt text for the image within the Business feed. 

  <img  src="..." alt="Sparkles"> 
SparklesYou have 10 overdue invoices from 10 customers. Give them more ways to pay.

Bill autofill uses AI powered

The bill page uses an inline image with alt="AI powered" within the button.

Intuit Assist on invoice reminder

The Business Feed's invoice reminder page uses SVG with aria-labelledby/title with "Thinking and Generating"

Thinking and generating Brand animation for thinking and generating state
Generated

Other companies

Google

Ask Gemini

Google uses "Ask Gemini" as the aria-label on their button.

Gemini icon within prompt results

The icon for Gemini within prompt results is an SVG with no label.

Amazon

Ask Rufus

Amazon is assuming the customer recognizes "Rufus" is their AI engine within the app. Their button has an aria-label with "Open Rufus panel"

Within the chat responses, the Rufus icon is an image with alt="" and no other indicatinos of who is responding: human or ai.

These single-ingredient duck treats provide a wholesome, protein-rich snack for dogs.

Best practices for AI Icons

It's important to identify when generated content is AI powered. This improves transparency and trust. It also helps identify content that needs to be reviewed before saving and sharing.

Wrapped SVG icon

Intuit adds aria-hidden="true" to SVG icons to treat them as decorative. They are meant to be used either with descriptive text or wrapped by a button/link that includes an aria-label. In this instance, we have an image of a Intuit assist logo that is not interactive, but lets the customer know they are working with information developed by AI.

The SVG will have aria-hidden="true". The wrapper is a div with role="img" and an aria-label. 


<div role="img" aria-label="AI Powered">

  <svg aria-hidden="true"  ... >

    ...
  </svg>

</div>

Image with alt text

An inline image should have alt="AI Powered"

AI powered You have 10 overdue invoices from 10 customers. Give them more ways to pay. 

<div >

  <img alt="AI powered" src="...">

  <span class="_body_12ukw_29">You have 10 overdue invoices from 10 customers. Give them more ways to pay.

    <button  type="button">Set up payments</button>

  </span>

</div>